<template>
  <div class="comment-item">
    <div class="left">
      <img  class="shoka-avatar" :src="commentItem.fromUser?.avatar" />
    </div>
    <div class="right">
      <div class="user-box">
        <div style="font-size: 14px;font-weight: 600"><span >{{commentItem.fromUser?.nickName || '用户不存在'}}</span>
          <span class="up" v-if="commentItem.fromUid!=null && commentItem.fromUid == 1" > [博主]</span>
        </div>
        <div style="margin-top: 5px;font-size: 12px" ><span >{{commentItem.createTime}}</span>
<!--          <a-button danger>Danger Default</a-button>-->
          <span style="margin-left: 5px" class="delete" v-has-permi="['blog:comment:delete']" @click="del(commentItem.id)"  danger type="text">[删除]</span>
        </div>
      </div>
      <div  :id="commentItem.id" class="comment-box">
        <div class="comment-content">
          <span  style="font-weight: 600;cursor: pointer" v-if="commentItem.parentId && commentItem.parentId != 0 " @click="gotoComment(commentItem.parentId)">
           @{{ commentItem.toUser?.toNickName || '用户不存在'}}
          </span>
          <div class="reply-content" v-html="commentItem.commentContent"></div>
        </div>
        <div @click="openReply">
          <a-button type="text">{{showByReply}}</a-button>
        </div>
      </div>
      <div class="reply-box">
        <reply-box @close="openReply()"
                   :to-uid="commentItem.fromUid"
                   :reply-id="replyId"
                   :parent-id="commentItem.id"
                   :show="show"
                   :comment-type="1"
                   :type-id="commentItem.typeId" >

        </reply-box>
      </div>

      <div v-if="commentItem.children!=null&&commentItem.children.length>0" class="comment-child">
        <div v-show="collect" v-for="item in commentItem.children" >
          <comment-item :reply-id="replyId"
                        :id="'commentItem-' + item.id"
                        :key="commentItem.id"
                        :comment-item="item" />
        </div>
        <a-divider @click="toCollect" style="cursor: pointer;font-size: 12px" orientation="left">{{showByCollect}} / 共{{commentItem.children.length}}条</a-divider>
      </div>
    </div>
  </div>
</template>

<script>
import ReplyBox from "../ReplyBox";
import {detComment} from "../../api/comment"
import {message} from "ant-design-vue";

export default {
  name: "commentItem",
  components: {ReplyBox},
  data(){
    return{
      show:0,
      collect:0
    }

  },
  computed:{
    showByReply(){
      return this.show ? '取消回复':'回复';
    },
    showByCollect(){
      return this.collect ? '收起回复':'展开回复';
    }

  },
  created() {
  },
  methods:{
    toCollect(){
      this.collect^=1;
    },
    openReply(){
      this.show^=1;
    },
    del(id){
      detComment(id).then(res => {
        message.success("删除成功！");
        // console.log(document.getElementById("comment-" + id))
        document.getElementById("commentItem-" + id).remove();
      })
    },
    gotoComment(id){
      const element = document.getElementById(id);
      if (element) {
        const elementRect = element.getBoundingClientRect();
        const bodyRect = document.body.getBoundingClientRect();
        const offsetTop = elementRect.top - bodyRect.top;
        const offsetHeight = elementRect.height;
        const windowHeight = window.innerHeight || document.documentElement.clientHeight;

        const scrollToPosition = offsetTop - (windowHeight - offsetHeight) / 2;

        window.scrollTo({
          top: scrollToPosition,
          behavior: 'smooth'
        });

       // 添加闪烁效果的 CSS 类
        element.classList.add('blink');
        // 一段时间后停止闪烁
        setTimeout(function() {
          element.classList.remove('blink');
        }, 1000);
      }
    },
  },
  props:{
    commentItem:{
      type:Object,
      default:{}
    },
    replyId:{
      type:String,
      default: ""
    }
  }
}
</script>

<style  lang="scss" scoped>
.comment-item{
  display: flex;

  /* 样式表中添加闪烁效果的定义 */
  @keyframes blink-animation {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }

  .blink {
    animation: blink-animation .3s infinite;
  }

  .shoka-avatar {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;

    &:hover{
      cursor:pointer;
    }

  }

  .left{

  }
  .right{
    margin-left: 10px;
    flex: 1;
    .user-box{
      height: 40px;
      justify-content: center;
      display: flex;
      flex-direction: column;

      .mid-front{
        font-size: 14px !important;
      }
      .up{
        //@include embellishment-color;
      }
      .delete{
        //@include embellishment-color;
        cursor: pointer;
      }
    }

    .comment-box{

      .comment-content{
        margin: 10px 0;
        font-size: 14px;

      }
      .reply-content{
        margin-top: 10px;
        line-height: 1.5;
        overflow: hidden;
        word-wrap: break-word;
        word-break: break-word;
        white-space: pre-wrap;
        vertical-align: baseline;
      }
    }
    .reply-box{
      margin: 20px 0;
    }
  }
}

</style>
